<template>
  <div class="home">

    <HomeHeader :category="category" @change="change"></HomeHeader>
    <div class="home-title">
      <h2>
        <i class="iconfont icon-zixun-weixuan"></i>课程列表
      </h2>
    </div>
    <div class="home-slide">
      <cube-slide :data="slides" />
    </div>
    <div class="home-list">
      <cube-recycle-list class="list" :size="size" :on-fetch="onFetch" :offset="offset" ref="lists">
        <template slot="item" slot-scope="{ data }">
          <div :id="data.id" class="item">
            <h2>{{data.title}}</h2>
            <img :src="data.pic">
            <p>劲爆价格:{{data.price}}¥</p>
          </div>
        </template>
      </cube-recycle-list>
    </div>
  </div>
</template>
<script>
import HomeHeader from "./HomeHeader";
import * as types from "@/store/types";
import {fetchNewLessonList } from '@/api/home';
import { createNamespacedHelpers } from "vuex";
let { mapState, mapActions,mapMutations } = createNamespacedHelpers("home");
export default {
  components: {
    HomeHeader
  },
  data(){
      return {
          hasMore:true,
          size:5,
          offset:0
      }
  },
  computed: {
    ...mapState(["category", "slides"])
  },
  methods: {
    ...mapActions([types.SET_SLIDES, types.SET_CATEGORIES]),
    ...mapMutations([types.SET_LESSON]),
    async onFetch(){
        //hasMore size offset
        if(this.hasMore){
            //拉取数据 调用拉取数据的api接口
           let {hasMore,result} =  await fetchNewLessonList(this.size,this.offset);
           this.hasMore = hasMore;
           this.offset+=result.length;
           return result;
        }else{
            return false;
        }
    },
    change(value){
         this[types.SET_LESSON](value[0]);
         this.hasMore = true;
         this.offset = 0;
         this.$refs.lists.reset();
    }
  },
  mounted() {
    // this.$store.dispatch(types.SET_SLIDES)
    //从后端拿到数据并保存在state中
    this[types.SET_SLIDES]();
    this[types.SET_CATEGORIES]();
  }
};
</script>
<style scoped lang="stylus">
.home {
  &-title {
    line-height: 35px;
    padding-left: 20px;
    font-weight: bold;
  }

  &-slide {
    width: 100%;
    height: 150px;
  }

  .cube-slide-item > a > img {
    width: 100%;
    max-width: 100%;
  }
  &-list{
      height:calc(100vh - 300px)
      
  }
  .item{
      border-radius 5px
      margin 0 20px 20px
      height 150px
      display flex
      flex-direction column
      align-items center
      background #fff
      border:1px solid #ccc
     
  }
  img{
      width 100%
      height 100px
  }
  p{
      line-height 25px
  }
}

</style>